<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#realname, #classname {
		margin-top: 2px;
	}
</style>
<div class="page-header">
	<h1>
		人工激活卡号
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline" id="data-search">
					<div class="form-inline keyword-search-div">
						<label class="keyword-search-label">名称&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<div class="div-search">
								<input style="float:left;height:30px;width:180px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="student-name" placeholder="搜索学生名称..." autocomplete="off">
								<span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
								<button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
									<i class="ace-icon fa fa-search nav-search-icon white"></i>
								</button>
							</div>
						</div>
					</div>
                    <div class="form-inline keyword-search-div" id="div-grade">
                        <label class="keyword-search-label">年级&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <div class="keyword-search-box">
                            <a href="javascript:;" class="keyword-search-keyword keyword-search-grade active" data-id="0">全部</a>
                            <?php if(isset($gradeList)): ?>
                                <?php foreach($gradeList as $grade): ?>
                                    <a href="javascript:;" class="keyword-search-keyword keyword-search-grade"  data-id="<?=$grade['id']?>"><?=$grade['grade_name']?></a>
                                <?php endforeach; ?>
                            <?php endif ?>
                        </div>
                    </div>
                    <div class="form-inline keyword-search-div" id="div-normal-class">
                        <label class="keyword-search-label">行政班</label>
                        <div class="keyword-search-box">
                            <a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class active" data-id="0">全部</a>
                        </div>
                    </div>
                    <div class="form-inline keyword-search-div">
						<label class="keyword-search-label">过期&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box" id="div-expire">
							<a href="javascript:;" class="keyword-search-keyword active" data-value="0">全部</a>
								<a href="javascript:;" class="keyword-search-keyword" data-value="1">是</a>
								<a href="javascript:;" class="keyword-search-keyword" data-value="2">否</a>
						</div>
                    </div>	
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<!-- 学校表格 -->
	<table id="dynamic-table" class="table table-striped table-bordered table-hover mt10">
		<thead>
			<tr>
				<!-- <th class="center">
					<label class="check-th">
						<input type="checkbox" class="ace" id="check-first">
						<span class="lbl"></span>
					</label>
				</th> -->
				<th>学生名称</th>
				<th>就读班级</th>
				<th>学号</th>
				<th>有效时间</th>
				<th width="28%">操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<!-- 激活弹窗 -->
<div id="modal-activate" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					激活卡号
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="image-form">
                            <input type="hidden" name="student-id" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">学生姓名：</label>
								<div class="col-sm-6">
									<span class="form-control no-border no-padding-left" id="realname"></span>
								</div>
                            </div>
                            <div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">就读班级：</label>
								<div class="col-sm-6">
									<span class="form-control no-border no-padding-left" id="classname"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">收费项目：</label>
								<div class="col-sm-6">
									<select class="chosen-select form-control tag-input-style" id="form-field-select-3" data-placeholder="选择收费项目" name="charge-id">
										<?php foreach($chargeList as $charge): ?>
											<option value="<?=$charge['id']?>"><?=$charge['name']?>（<?=$charge['active']?>）</option>
										<?php endforeach; ?>
									</select>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="btn-activate">
					<i class="ace-icon fa fa-check"></i> 激活
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	var schoolId = 0;
	// 班级数据
	var normalClassJson = <?= $gradeNormalClassList ?>;

	$(function(){
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('school/get_student_list')?>',
			"columns": [
	            // {"data": function(ret){
				// 	return "<div class='center'><label class='check-td'><input type='checkbox' class='ace check-list' value=" + ret.id + "><span class='lbl'></span></label></div>";
				// }},	
				{"data": function(ret){
					if(ret.gender == '男') {
						var gender = ' <i class="fa fa-mars blue"></i>';
					} else {
						var gender = ' <i class="fa fa-venus red"></i>';
					}
					return ret.realname + gender;
	            }},
	            {"data": function(ret){
	            	return '<span class="label label-success" style="margin-right:5px">'+ ret.className +'</span>'
	            }},
				{"data": "username"},
				{"data": "expire_date"},
	            {"data": function(ret){
					var action = '';
						if(ret.expiredSoon == true) {
							action += '<a class="activate" href="javascript:;" data-toggle="modal" data-target="#modal-activate" data-id="'+ ret.id +'" \
                        	data-realname="'+ ret.realname +'" data-classname="'+ ret.className +'"><i class="fa fa-edit"></i> 激活</a>';
						}
					return action;
	            }},
			],
			"callback": function() {
			}
		});
	
		// 年级班级联动
		$("#data-search-grade").change(function(){
			var gradeId = $(this).val();
			var classSelect = $("#data-search-class");
			var getUrl = "<?=admin_url('school/get_class_list')?>/" + gradeId;
			ajax_get(getUrl, {hideLoading: true}, function(res){
				var optionHtml = "";
				classSelect.html('<option value="">全部班级</option>');

				for(var i in res.data) {
					var classData = res.data[i];
					if(classData.class_type == '<?=CLASSES_TYPE_NORMAL?>') classSelect.append('<option value="'+ classData.id +'">'+ classData.class_name +'</option>');
				}
			})
		})
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			// 如果是点击年级
			if($(this).hasClass("keyword-search-grade")) {
				// 先清空班级列表
				$(".keyword-search-normal-class:gt(0)").remove();
				// 获取班级列表
				var normalClassList = normalClassJson[id];
				for(var i in normalClassList) $(".keyword-search-normal-class:first").parent().append('<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class" data-id="'+ normalClassList[i].id +'">'+ normalClassList[i].name +'</a>');
				// 选中全部班级
				var studentName = $("[name=student-name]").val();
				var gradeId = $("#div-grade .active").data("id");
                var expire = $("#div-expire .active").data("value");
				// 筛选班级
				table.setAjaxData({
					"keyword": studentName,
					"gradeId": gradeId,
                    "expire": expire
				});
			} else {
				var studentName = $("[name=student-name]").val();
				var gradeId = $("#div-grade .active").data("id");
				var classId = $("#div-normal-class .active").data("id");
				var expire = $("#div-expire .active").data("value");
				// 筛选班级
				table.setAjaxData({
                    "keyword": studentName,
					"classId": classId,
                    "expire": expire
				});
			}
		});
		// 敲回车就搜索
		$("[name=student-name]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=student-name]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=student-name]").val('');
					$(this).hide();
					// 重置搜索结果
					var gradeId = $("#div-grade .active").data("id");
					var classId = $("#div-normal-class .active").data("id");
                    var expire = $("#div-expire .active").data("value");
					table.setAjaxData({
						"gradeId": gradeId,
						"classId": classId,
                        "expire": expire
					});
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			var studentName = $("[name=student-name]").val();
			var gradeId = $("#div-grade .active").data("id");
			var classId = $("#div-normal-class .active").data("id");
            var expire = $("#div-expire .active").data("value");
			table.setAjaxData({
				'keyword': studentName,
				"gradeId": gradeId,
				"classId": classId,
                "expire": expire
			})
		});
        // 点击激活
        $("body").on("click", ".activate", function() { 
            var studentId = $(this).data("id");
            var realname = $(this).data("realname");
            var classname = $(this).data("classname");
            $("[name=student-id]").val(studentId);
            $("#realname").text(realname);
            $("#classname").text(classname);
            // alert(studentId);
        });
        // 激活action
        $("#btn-activate").click(function() {
            var studentId = $("[name=student-id]").val();
            var chargeId = $("[name=charge-id]").val();
            layer.confirm('确定激活？', function(index){
                layer.close(index);
                // 提交数据
                var actionUrl = "<?=admin_url('school/artificial_activate')?>";
                var actionData = {
                    "student_id": studentId,
                    "charge_id": chargeId
                };
                ajax_post(actionUrl, actionData, function() {
                    window.location.reload();
                });
            });
        });
	})
</script>